<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>在目标上释放对象</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
        }

        .red {
            background-color: red;
        }

        .drop-zone {
            width: 300px;
            padding: 20px;
            border: 2px dashed #000;
        }
    </style>
</head>
<body>
<div class="box red" draggable="true"></div>
<div class="drop-zone" id="drop-zone">Drop Zone!</div>
<div id="drop-status"></div>
<script>
    function dragDropHandler(e) {
        e.preventDefault();
        if (e.type == 'dragover') {
            dropStatus.innerHTML = 'You\'re dragging over the drop zone!'
        } else {
            dropStatus.innerHTML = 'You dropped something!';
        }
    }

    var dropZone = document.getElementById('drop-zone');
    var dropStatus = document.getElementById('drop-status');

    dropZone.addEventListener('dragover', dragDropHandler);
    dropZone.addEventListener('drop', dragDropHandler);
</script>
</body>
</html>